<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>接口详细信息</title>
<%@include file="../public.jsp"%>
<script src="<%=path %>/js/api/detail.js"></script>

<script src="<%=path %>/js/api/row.js"></script>
<script type="text/javascript">
function select(id){
	var type = $("#"+id).val();
	if(type=="array"||type=="object"){
		$("#composition").hide();
		$("#table").show();
		$("#addRoot").show();
	}else{
		if(type=="自定义"){
			$("#composition").show();
			$("#table").hide();
			$("#addRoot").hide();
		}else{
			$("#composition").hide();
			$("#table").hide();
			$("#addRoot").hide();
		}
	}
}

function select1(id){
	var type = $("#"+id).val();
	if(type=="array"||type=="object"){
		$("#composition1").hide();
		$("#table1").show();
		$("#addRoot1").show();
	}else{
		if(type=="自定义"){
			$("#composition1").show();
			$("#table1").hide();
			$("#addRoot1").hide();
		}else{
			$("#composition1").hide();
			$("#table1").hide();
			$("#addRoot1").hide();
		}
	}
}

function checkRequestCode() {
	 var code = $("#requestCode").val();	
	 var apiId = ${apiId};
	 $.ajax({	
       type:'POST', 
       url:ctx+'/api/${apiId}/request/checkRequestCode',
       data: {apiId:apiId,code:code},
       success:function(data){
      	 if(data.code==100){
      		 confirm_info("编码" + code + data.message);
      		 $("#requestCode").val("");
      	 }
       }
	 });
}
function checkResponseCode() {
	 var code = $("#add_code").val();	
	 var apiId = ${apiId};
	 $.ajax({	
      type:'POST', 
      url:ctx+'/api/${apiId}/request/checkResponseCode',
      data: {apiId:apiId,code:code},
      success:function(data){
     	 if(data.code==100){
     		confirm_info("编码" + code + data.message);
     		 $("#add_code").val("");
     	 }
      }
	 });
}

</script>
</head>
<body>
	<%@include file="../head.jsp"%>
	<%@include file="../project/menu.jsp"%>
	<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
		<div class="row">
			<ol class="breadcrumb">
				<li><a href="<%=path %>/index"><span
						class="glyphicon glyphicon-home"></span></a></li>
				<li><a href="<%=path %>/project">项目列表</a></li>
				<li><a href="<%=path %>/project/${proId}/api">${proName}</a></li>
				<li class="active">${apiName}</li>
			</ol>
		</div>
		<!--/.row-->
	</div>
	<!--/.main-->
	<br>
	<br>
	<br>
	<br>
	<div class="container">
		<div class="row clearfix">
			<div class="col-md-8 column"
				style="position: absolute; margin-left: 200px;">
				<div class="tabbable" id="tabs-747265">
					<ul class="nav nav-tabs">
						<li class="active"><a href="#panel-959415" data-toggle="tab">请求信息</a>
						</li>
						<li><a href="#panel-252617" data-toggle="tab">响应信息</a></li>
					</ul>
					<div class="tab-content">
						<!-- 请求 -->
						<div class="tab-pane active" id="panel-959415" >
						<br>
							<button class="btn btn-success" type="button"
							style="position: absolute;" onClick="checkRow('requestTab');">新增</button>
								
							<c:if test="${project.dataCenterType=='hbase'}">
							<button class="btn btn-primary" type="button" style="position: absolute;margin-left: 100px;" data-toggle="modal"
							data-target="#RowKeyModal">设计RowKey</button>
							</c:if>
							
							<c:if test="${api.responseDataType=='list'}">
							<div class="checkbox" style="position: absolute;margin-left: 250px;">
								<label><input type="checkbox" onclick="checkboxOnclick(this,${apiId})">是否需要分页</label>
							</div>
							</c:if>
							
							<br>
							<br>
							<br>
							<!-- 设计RowKey -->
							<div class="modal fade" id="RowKeyModal" tabindex="-1" role="dialog"
								aria-labelledby="myModalLabel" aria-hidden="true" >
								<div class="modal-dialog" style="width: 700px; height: 500px;" >
									<form role="form" action="<%=path %>/api/${apiId}/request/rowkey"
									id="apiForm">
										<c:if test="${rowkey.id!=null}">
										<input type="hidden" id="rowkeyId" name="id" value="${rowkey.id}">
										</c:if>
										<c:if test="${rowkey.id==null}">
										<input type="hidden" id="rowkeyId" name="id" value="0">
										</c:if>
										<div class="modal-content" >
											<div class="modal-header">
												<button type="button" class="close" data-dismiss="modal"
											aria-hidden="true">&times;</button>
											<h4 class="modal-title" id="myModalLabel" align="center">
												设计RowKey</h4>
											</div>
										<div style="margin-left:30px;">请在下方编辑设计RowKey的代码</div><br>
										<div style="margin-left:30px;">
										<!-- <input type="checkbox" id="default" onclick="checkboxOnclick(this)" >使用默认RowKey -->
										</div>
										<input type="hidden" id="apiId" name="apiId" value="${apiId}">
										<c:if test="${api.responseDataType=='object'}">
											<div id="design" class="modal-body"
												style="overflow-y: auto; width: 680px; height: 400px;">
												<textarea id="rowkey_textarea" class="form-control" name="context"
												style="width: 650px;height:370px;resize: none;">${rowkey.context}</textarea>
											</div>
										</c:if>
										
										<c:if test="${api.responseDataType=='list'||api.responseDataType=='count'||api.responseDataType=='page'}">
										<div style="width: 690px; height: 400px;overflow-y:auto; ">
											<div style="margin-left:30px;">请设计start的代码</div><br>
											<div id="start" class="modal-body">
												<textarea id="rowkey_textarea" class="form-control" name="startContext"
												style="width: 650px;height:370px;resize: none;">${rowkey.startContext}</textarea>
											</div>
											<div style="margin-left:30px;">请设计end的代码</div><br>
											<div id="end" class="modal-body">
												<textarea id="rowkey_textarea" class="form-control" name="endContext"
												style="width: 650px;height:370px;resize: none;">${rowkey.endContext}</textarea>
											</div>
										</div>
										</c:if>
									<div class="modal-footer">
										<button type="button" class="btn btn-default"
										data-dismiss="modal">关闭</button>
										<button type="submit" class="btn btn-primary">保存</button>
									</div>
								</div>
							</form>
						</div>
					</div>
					
							<form action="#" id="requestForm">
								<table id="requestTab" class="table table-bordered"
									style="width: 100%">
										<div class="col-lg-12"  id="alert">
                	</div>
									
									<thead>
										<tr>
											<th style="width: 2%">#</th>
											<th style="width: 13%">编码</th>
											<th style="width: 13%">描述</th>
											<th style="width: 15%">参数位置</th>
											<th style="width: 15%">类型</th>
											<th style="width: 13%">必填</th>
											<!-- <th style="width: 15%">条件格式</th> -->
											<th style="width: 14%">操作</th>
										</tr>
									</thead>
									<tbody id="requestList">

									</tbody>
								</table>
							</form>
						</div>
						<!-- 响应 -->
						<div class="tab-pane" id="panel-252617">
							<br>
							<button class="btn btn-success" type="button" style="position: absolute;"
							data-toggle="modal" data-target="#AddModal" id="add_response_btn">新增</button>
							
							<c:if test="${project.dataCenterType=='mysql'||project.dataCenterType=='oracle'}">
								<button class="btn btn-primary" type="button" style="position: absolute;margin-left: 100px;" data-toggle="modal"
								data-target="#SqlModal">自定义Sql</button>
							</c:if>
							<br>
							
							<!-- 自定义Sql -->
				    <div class="modal fade" id="SqlModal" tabindex="-1" role="dialog"
								aria-labelledby="myModalLabel" aria-hidden="true" >
								<div class="modal-dialog" style="width: 700px; height: 400px;" >
										<c:if test="${sqlSentence.id!=null}">
										<input type="hidden" id="sqlId" name="id" value="${sqlSentence.id}">
										</c:if>
										<c:if test="${sqlSentence.id==null}">
										<input type="hidden" id="sqlId" name="id" value="0">
										</c:if>
										<div class="modal-content" >
											<div class="modal-header">
												<button type="button" class="close" data-dismiss="modal"
											aria-hidden="true">&times;</button>
											<h4 class="modal-title" id="myModalLabel" align="center">
												自定义Sql</h4>
											</div>
										<br>
										<div style="margin-left:30px;">请在下方编辑自定义的Sql语句</div><br>
										<div style="margin-left:30px;">
										例如:select a.name,r.context from rest_api a,row_key r where r.apiId = {apiId} and a.id = {apiId}
										</div>
											<input type="hidden" id="apiId" name="apiId" value="${apiId}">
											<div id="design" class="modal-body"
												style="overflow-y: auto; width: 680px; height: 300px;">
												<textarea id="sql_textarea" class="form-control" name="sqlContext"
												style="width: 650px;height:270px;resize: none;">${sqlSentence.sqlContext}</textarea>
											</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-default"
										data-dismiss="modal">关闭</button>
										<a id="saveSql" class="btn btn-primary">保存</a>
									</div>
								</div>
						</div>
					</div>
							
							<!-- 添加response -->
							<div class="modal fade" id="AddModal" tabindex="-1" role="dialog"
								aria-labelledby="myModalLabel" aria-hidden="true" >
								<div class="modal-dialog" style="width: 700px; height: 500px;" >
								<div class="modal-content" >
									<div class="modal-header">
												<button type="button" class="close" data-dismiss="modal"
											aria-hidden="true">&times;</button>
											<h4 class="modal-title" id="myModalLabel" align="center">
												请求响应信息</h4>
									</div>
									
									<div class="modal-body" style="width: 600px; height: auto;">
									<form id="respCustSchemaForm" role="form" class="form-horizontal">
									<input id="operTypeId" type="hidden" value="">
								<%-- 	<input name="docId" type="hidden" value="${apiId}"> --%>
									<input name="interId" type="hidden" value="${apiId}">
									
									  <dl class="dl-horizontal" style="float: left;">
									    
									    <dt>编码</dt>
										<dd>
										  <div style="width: 350px;">
												<input type="text" id="code" class="form-control"
													name="code" required="required">
													<span id="code_text" style="color: red;"></span><br>
									      </div>
										</dd>
										
										<dt>描述</dt>
										<dd>
										  <div style="width: 350px;">
												<input type="text" id="description" class="form-control"
													name="description" onblur="post(pro_name)">
													<span id="pro_name1" style="color: red;"></span><br>
									      </div>
										</dd>
										<c:if test="${!project.textOnly}">
										<dt>对应字段名称</dt>
										<dd>
										  <div style="width: 350px;">
												<input type="text" id="columnName" class="form-control"
													name="columnName" required="required" onblur="post(pro_name)">
													<span id="pro_name1" style="color: red;"></span><br>
									      </div>
										</dd>
										</c:if>
										<dt>类型</dt>
										<dd>
										  <div style="width: 350px;">
									        <select class="form-control" name="type" id="type" onchange="select('type');">
												<option >String</option>
												<option>array</option>
												<option>object</option>
												<option>boolean</option>
												<option>int</option>
												<option>long</option>
												<option>float</option>
												<option>double</option>
												<option>decimal</option>
												<option>ref</option>
												<option>自定义</option>
											</select><br>
									      </div>
										</dd>
										
										<div id="composition" class="col-log-4" style="display: none;">
										  <dt>自定义结构</dt>
										  <dd>
										  <textarea class="form-control" style="width: 350px;height: 150px;" name="composition"></textarea>
									  	  </dd>
									  	</div>
									  
									  </dl>
									  </form>
									  
									  <div id="table" class="col-log-8" style="display: none;">
										  <table id="rootPoint" class="tree table table-hover">
										  	<thead>
										  		<tr>
										  			<th class="col-xs-3">编码</th>
										  			<th class="col-xs-3">描述</th>
										  			<th class="col-xs-3">对应字段名称</th>
										  			<th class="col-xs-3">类型</th>
										  		</tr>
										  	</thead>
										  </table>
									  </div>
									  
									<div id="footer" class="modal-footer">
									<div></div>
										<div class="col-xs-3 text-left">
								
								             <button id="addRoot" type="button" class="btn btn-warning" style="float:left;display: none;">新增根节点</button>
							           </div>
										<button type="button" class="btn btn-default"
										data-dismiss="modal">关闭</button>
										<a id="saveResponse" class="btn btn-primary">保存</a>
									</div>
									</div>
								</div>
							</div>
						</div>
							<!-- end -->
							
							<!-- 更新response -->
				
							<div class="modal fade" id="updateModal" tabindex="-1" role="dialog"
								aria-labelledby="myModalLabel" aria-hidden="true" >
								<div class="modal-dialog" style="width: 700px; height: 500px;" >
								<div class="modal-content" >
									<div class="modal-header">
												<button type="button" class="close" data-dismiss="modal"
											aria-hidden="true">&times;</button>
											<h4 class="modal-title" id="myModalLabel" align="center">
												请求响应信息</h4>
									</div>
									
									<div class="modal-body" style="width: 600px; height: auto;">
									<form id="respCustSchemaForm1" role="form" class="form-horizontal">
									  <input type="hidden" id="responseId">
									  <dl class="dl-horizontal" style="float: left;">
									    
									    <dt>编码</dt>
										<dd>
										  <div style="width: 350px;">
												<input type="text" id="update_code" class="form-control"
													name="code" required="required">
													<span id="code_text" style="color: red;"></span><br>
									      </div>
										</dd>
										
										<dt>描述</dt>
										<dd>
										  <div style="width: 350px;">
												<input type="text" id="update_description" class="form-control"
													name="description" onblur="post(pro_name)">
													<span id="pro_name1" style="color: red;"></span><br>
									      </div>
										</dd>
										<c:if test="${!project.textOnly}">
										<dt>对应字段名称</dt>
										<dd>
										  <div style="width: 350px;">
												<input type="text" id="update_columnName" class="form-control"
													name="columnName" required="required" onblur="post(pro_name)">
													<span id="pro_name1" style="color: red;"></span><br>
									      </div>
										</dd>
										</c:if>
										<dt>类型</dt>
										<dd>
										  <div style="width: 350px;">
									        <select class="form-control" name="type" id="update_type" onchange="select1('update_type');">
												<option >String</option>
												<option>array</option>
												<option>object</option>
												<option>boolean</option>
												<option>int</option>
												<option>long</option>
												<option>float</option>
												<option>double</option>
												<option>decimal</option>
												<option>ref</option>
												<option>自定义</option>
											</select><br>
									      </div>
										</dd>
										
										<div id="composition1" class="col-log-4" style="display: none;">
										  <dt>自定义结构</dt>
										  <dd>
										  <textarea class="form-control" style="width: 350px;height: 150px;" name="composition"></textarea>
									  	  </dd>
									  	</div>
										
									  </dl>
									</form>
									  <div id="table1" class="col-log-8" style="display: none;">
										  <table id="rootPoint1" class="tree table table-hover">
										  	<thead>
										  		<tr>
										  			<th class="col-xs-3">编码</th>
										  			<th class="col-xs-3">描述</th>
										  			<th class="col-xs-3">对应字段名称</th>
										  			<th class="col-xs-3">类型</th>
										  		</tr>
										  	</thead>
										  	<tbody id="update_response">
										  	
										  	</tbody>
										  </table>
									  </div>
									  
									<div id="footer" class="modal-footer">
									<div class="row">
										<button class="btn btn-warning" type="button" id="addRoot1"
												style="float:left;display: none;" >新增根节点</button>
										<button type="button" class="btn btn-default"
										data-dismiss="modal" id="close">关闭</button>
										<a id="updateResponse" class="btn btn-primary" value="">保存</a>
									</div>
									</div>
									</div>
								</div>
							</div>
						</div>
							 
							<!-- end -->
							<br>
							<table id="responseTab" class="table table-bordered"
								style="width: 100%">
								<br>
								<thead>
									<tr>
										<th style="width: 5%">#</th>
										<th style="width: 19%">编码</th>
										<th style="width: 19%">描述</th>
										<c:if test="${!project.textOnly}">
										<th style="width: 19%">对应字段名称</th>
										</c:if>
										<th style="width: 19%">类型</th>
										<th style="width: 13%">操作</th>
									</tr>
								</thead>

								<tbody id="responseList">

								</tbody>
							</table>
						</div>

					</div>
				</div>
			</div>
		</div>

		<!-- end -->
	</div>
	<script id="custSchemaTmpl" type="text/html">
	<tr>
		<td>
			<input name="code" id="rootCode" class="form-control" style="display:inline;width:50%;"/>
		</td>
		<td>
			<input name="description" id="rootDescription" class="form-control" />
		</td>
<td>
			<input name="columnName" id="rootcolumnName" class="form-control" style="display:inline;width:50%;"/>
		</td>
		<td>
			<select name="type" id="rootType" class="form-control cust-schema-type">
           		<option>String</option>
												<option>array</option>
												<option>object</option>
												<option>boolean</option>
												<option>int</option>
												<option>long</option>
												<option>float</option>
												<option>double</option>
												<option>decimal</option>
												<option>ref</option>
												<option>自定义</option>
           	</select>
		</td>						
		
   	</tr>
</script>

<script id="respInfoTmpl" type="text/html">  
	<tr>
    	<td></td>
		<td>
			<input name="code" type="text" value="" class="form-control" readonly>
		</td>
    	<td>
			<input name="description" type="text" value="" class="form-control" readonly>
		</td>
        <td>
            <input type="text"  class="form-control" name="columnName" value="" readonly >
       </td>
		<td>
			<select name="type" class="form-control" disabled>
           		<option>String</option>
												<option>array</option>
												<option>object</option>
												<option>boolean</option>
												<option>int</option>
												<option>long</option>
												<option>float</option>
												<option>double</option>
												<option>decimal</option>
												<option>ref</option>
												<option>自定义</option>
           	</select>
		</td>	
       
    	<td class="actions">
			<button type="button" class="btn btn-sm btn-primary oper-update" data-toggle="modal" data-target="#updateModal">
            	<i class="fa fa-pencil"></i> 编辑
			</button>

			<button type="button" class="btn btn-sm btn-danger oper-del">
				<i class="fa fa-trash"></i>删除
			</button>
		</td>
    </tr>
</script> 

	
</body>
</html>